<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>库内管理</el-breadcrumb-item>
      <el-breadcrumb-item>调拨</el-breadcrumb-item>
    </el-breadcrumb>
    <el-container>
      <el-main>
        <div id="formDiv">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="调拨单号" prop="alloctionno">
              <el-input
                v-model="ruleForm.allocationno"
                style="width: 250px"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="原仓库" prop="bwarehouseid">
              <!-- 下拉框通过value传值 -->
              <el-select
                v-model="ruleForm.bwarehouseid"
                placeholder="请选择原仓库"
                style="width: 250px"
              >
                <el-option
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                  v-for="item in test"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="目标仓库" prop="awarehouseid">
              <el-select
                v-model="ruleForm.awarehouseid"
                placeholder="请选择目标仓库"
                style="width: 250px"
              >
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数量" prop="remark">
              <el-input
                v-model="ruleForm.remark"
                style="width: 250px"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="submitForm('ruleForm')"
                >移库</el-button
              >
              <el-button
                type="primary"
                @click="resetForm"
                icon="el-icon-refresh"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        bwarehouseid: "",
        allocationno: "",
        awarehouseid: "",
        remark: "",
      },

      test: [
        { id: 1, value: "值1" },
        { id: 2, value: "值2" },
      ], //下拉测试数据，到时候换成自己的就行

      rules: {
        bwarehouseid: [
          { required: true, message: "请选择原仓库", trigger: "change" },
        ],
        awarehouseid: [
          { required: true, message: "请选择目标仓库", trigger: "change" },
        ],
      },

      commodity: {},
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }, //上架按钮点击

    resetForm() {
      this.$refs.ruleForm.resetFields();
    }, //重置表单

    commoditybarSelect(warehouseid) {}, //商品编码下拉

    locatorcodeSelect() {
      //同上
    }, //货位编码下拉

    oldlocatorcodeSelect() {
      //同上
    }, //原货位编码下拉

    generateAllocationNo() {
      var date = new Date();
      this.ruleForm.allocationno =
        "AL" +
        date.getFullYear() +
        (date.getMonth()+1) +
        date.getDate() +
        date.getHours() +
        date.getMinutes() +
        date.getSeconds()+
        date.getMilliseconds();
    },
  },

  mounted: function () {
    this.commoditybarSelect();
    this.locatorcodeSelect();
    this.oldlocatorcodeSelect();
    this.generateAllocationNo();
  },
};
</script>

<style scoped>
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
#formDiv {
  width: 300px;
  margin-top: 130px;
  margin-left: 400px;
}
</style>